<template>
  <view>
    <UgoSearch />
    <u-tabs :list="list"
            active-color="#eb4450"
            bar-width="180"
            :is-scroll="false"
            :current="current"
            @change="change">
    </u-tabs>

    <!-- 3 tabs内容 条件渲染 -->
    <view class="tab-content u-p-10">
      <view v-for="(item ,index) in  list"
            :key="item.name"
            class="tabs-item">
        <block v-if="current===index">
          <navigator class="goods-show"
                v-for="goods in goodsList"
                :url="'/pages/goods_detail/goods_detail?goods_id='+goods.goods_id"
                :key="goods.goods_id">
            <view class="goods-img">
              <u-image mode="aspectFit"
                       width="191"
                       height="191"
                       :src="goods.goods_small_logo"></u-image>
            </view>
            <view class="goods-content">
              <view class="goods_name">{{goods.goods_name}}</view>
              <view class="goods_price">￥{{goods.goods_price}}</view>
            </view>
          </navigator>
        </block>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: '综合',
        },
        {
          name: '销量',
        },
        {
          name: '价格',
        },
      ],
      current: 0,
      goodsList: [],
    }
  },
  onLoad({ cid }) {
    this.pramas = {
      // 	string	关键字
      query: '',
      // 	string	分类id
      cid: cid,
      // 	number	页码
      pagenum: 1,
      // 	number	页容量
      pagesize: 10,
    }
    // console.log( this.pramas);
    // 商品总数
    this.total = 0
    this.getGoodsList()
  },
//   上拉刷新，获取更多的数据
  onReachBottom(){
      if (this.total<=this.goodsList.length) {
           uni.showToast({
                title: "没有更多数据了~",
                icon: "none",
            })
          return
      }
      this.pramas.pagenum++
      this.getGoodsList()
  },
//   下拉刷新，更新数据
  async onPullDownRefresh(){
      this.goodsList = []
      this.pramas.pagenum = 1
      await this.getGoodsList()
    //   停止下拉刷新
      uni.stopPullDownRefresh()
  },
  methods: {
    change(current) {
      this.current = current
    },
    // 获取最新数据
    async getGoodsList() {
      const reslut = await this.$u.http.get('/goods/search', this.pramas)
      this.goodsList = [...this.goodsList,...reslut.goods]
      this.total = reslut.total
    },
  },
}
</script>

<style lang="scss" scoped>
.goods-show {
  display: flex;
  padding: 10rpx 0;
  border-bottom: 1px solid #ccc;
  .goods-img {
    flex: 1;
  }
  .goods-content {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .goods_price {
      color: $themeColor;
    }
  }
}
</style>